<template>
  <div class="resource-cover-hor">
    <el-row :gutter="15">
      <el-col :span="10">
        <a @click="toDetail(drama.id)">
          <el-image :src="drama.cover | filterImg" fit="cover"></el-image>
        </a>
      </el-col>
      <el-col :span="14" class="resource-intro">
        <h3>
          <a @click="toDetail(drama.id)">
            <el-link :underline="false" v-text="drama.title">巨人族的新娘</el-link>
          </a>
        </h3>
        <el-row :gutter="10">
          <el-col :span="10">
            <p class="upd-time">{{drama.updateTime | dateFilter}}</p>
          </el-col>
          <el-col :span="10">
            <p class="play-type">类型: {{drama.category | categoryFilter}}</p>
          </el-col>
        </el-row>
        <p class="episode-num">更新至09集</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ResourceCoverHor",
  props: {
    drama: Object
  },
  methods: {
    toDetail(id) {
      let {href} = this.$router.resolve({path: `/detail/${id}`})
      window.open(href, '_blank')
      // this.$router.push(`/detail/1`)
    }
  }
}
</script>

<style scoped>
.resource-cover-hor {
  padding: 10px;
  border-bottom: 1px solid #eaeaea
}

.resource-cover-hor .el-image {
  width: 100%;
  height: 90px;
}

.resource-intro h3 {
  margin: 0;
  font-size: 18px;
}

.upd-time, .play-type {
  font-size: 13px;
  line-height: 10px;
  color: #bbbbbb;
}

.episode-num {
  font-size: 13px;
  color: #bbbbbb;
  margin: 0;
}
</style>
